﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS动画</title>
</head>

<body>
    <style>
        /* 进入动画阶段 */
        .my-enter-active {
            animation: my-in 0.5s;
        }

        /* 离开动画阶段 */
        .my-leave-active {
            animation: my-in 0.5s reverse;
        }

        /* 定义动画my-in */
        @keyframes my-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
    <div id="app">
        <button @click="show=!show">对雪</button>
        <transition name="my">
            <p v-if="show">Hello, Vue!我爱你</p>
        </transition>
    </div>

    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    show: true
                }
            }
        }).mount('#app');
    </script>
</body>

</html>